<%--
  Created by IntelliJ IDEA.
  User: lijch
  Date: 2021/4/2
  Time: 5:32 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="${pageContext.request.contextPath}/css/boot3/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js" type="text/javascript"></script>
    <script src="${pageContext.request.contextPath}/js/boot3/bootstrap.min.js" type="text/javascript"></script>
    <link href="${pageContext.request.contextPath}/css/user/register.css" rel="stylesheet"/>
    <style>
        .col-sm-12{
            margin-bottom: 3%;
        }
    </style>
</head>
<body>
    <div class="header">
        <div id="header_title">
            <a id="back_index" href="${pageContext.request.contextPath}/"> << 返回首页</a>
        </div>
    </div>

    <div class="container text-center">
        <form class="form-horizontal" style="width: 50%;background-color: #F3F3F3;border-radius: 5%;opacity: 0.9;">
            <div style="margin-bottom: 5%;font-size: 2em;font-family: 'YouYuan ',serif;font-weight: bold">注册易书城账号</div>
            <div class="row" style="width: 80%;margin-left: 10%">
                <div class="col-sm-12" id="phone_re">
                    <span id="phone_v"></span>
                    <div class="input-group">
                        <label class="input-group-addon" for="phone">手&nbsp;&nbsp;机&nbsp;&nbsp;号<span style="color: red">*</span></label>
                        <input type="text" class="form-control" id="phone">
                    </div>
                </div>
                <div class="col-sm-12" id="mail_re">
                    <span id="mail_v"></span>
                    <div class="input-group">
                        <label class="input-group-addon" for="email">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱<span style="color: red">*</span></label>
                        <input type="text" class="form-control" id="email">
                    </div>
                </div>
                <div class="col-sm-12">
                    <span id="name_v"></span>
                    <div class="input-group">
                        <label class="input-group-addon" for="user_name">用&nbsp;&nbsp;户&nbsp;&nbsp;名<span style="color: red">*</span></label>
                        <input type="text" class="form-control" id="user_name">
                    </div>
                </div>
                <br>
                <div class="col-sm-12">
                    <div class="input-group">
                        <label class="input-group-addon" for="pass1">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码<span style="color: red">*</span></label>
                        <input type="password" class="form-control" id="pass1">
                    </div>
                </div>
                <div class="col-sm-12">
                    <span id="pass_v"></span>
                    <div class="input-group">
                        <label class="input-group-addon" for="pass2">确认密码<span style="color: red">*</span></label>
                        <input type="password" class="form-control" id="pass2">
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="input-group">
                        <label class="input-group-addon">性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别<span style="color: red">*</span></label>
                        <label class="form-control">
                        <label style="margin-left: -20%"><input type="radio" name="sex" value="1">男</label>
                        <label style="margin-left: 20%"><input type="radio" name="sex" value="0">女</label>
                        </label>
                    </div>
                </div>
                <div class="col-sm-12" style="margin-top: 1%">
                    <div class="input-group">
                        <a class="btn btn-primary" id="doRegister" disabled onclick="doRegister()">注册</a>
                    </div>
                </div>
                <div class="col-sm-12">
                    <div class="input-group">
                        <span style="float: left">已有账号，去<a href="${pageContext.request.contextPath}/login/index">登录</a></span>
                        <a style="float: right" href="#" id="register_type">使用邮箱注册</a>
                    </div>
                </div>
            </div>
        </form>
    </div>
<script type="text/javascript">
    let f = 1;
    let phone_bool = false;
    let pass_bool = false;
    let mail_bool = false;
    let name_bool = false;

    $("#mail_re").hide();
    $("#register_type").click(function () {
        if (f === 1) {
            $("#phone_re").show();
            $("#mail_re").hide();
            $("#register_type").text("使用邮箱注册");
            f = 2;
        } else if (f === 2) {
            $("#phone_re").hide();
            $("#mail_re").show();
            f = 1;
            $("#register_type").text("使用手机号注册");
        }
    });

    function isPhoneNo(phone) {
        const pattern = /^1[345789]\d{9}$/;
        return pattern.test(phone);
    }

    $("#phone").blur(function () {
        let pn = $("#phone").val();
        if (isPhoneNo(pn)) {
            $("#phone_v").text("");
            $.ajax({
                async: true,
                type: "GET",
                data: {"uPhone": pn},
                url: "/user/phoneCheck",
                success: function (data) {
                    if (data !== "1") {
                        $("#phone_v").css("color", "red").text("该手机号已注册");
                    } else {
                        phone_bool = true;
                        bool_btn();
                    }
                }
            });
        } else {
            $("#phone_v").css("color", "red").text("请输入正确的手机号");
        }
    });


    function isEmail(email) {
        var reg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
        return reg.test(email);
    }

    $('#email').blur(function () {
        const e = $("#email").val();
        if (e != null || e.length > 0) {
            let b = isEmail(e);
            if (b) {
                $("#mail_v").text("");
                $.ajax({
                    async: true,
                    type: "GET",
                    data: {"uEmail": e},
                    url: "/user/checkEmail",
                    success: function (data) {
                        if (data == "1") {
                            $("#mail_v").text("");
                            bool_btn();
                            mail_bool = true;
                        } else {
                            $("#mail_v").css("color", "red").text("该邮箱已注册");
                            mail_bool = false;
                        }
                    }
                });
            } else {
                $("#mail_v").css("color", "red").text("请输入正确的邮箱");
                mail_bool = false;
            }
        }
    });

    $('#user_name').blur(function () {
        let name = $("#user_name").val();
        if (name != null) {
            $.ajax({
                async: true,
                type: "GET",
                data: {"uName": name},
                url: "/user/checkName",
                success: function (data) {
                    if (data == "1") {
                        $("#name_v").text("");
                        bool_btn();
                        name_bool = true;
                    } else {
                        console.log(data);
                        $("#name_v").css("color", "red").text("该用户名已存在");
                        name_bool = false;
                    }
                }
            });
        } else {
            mail_bool = false;
        }
    });

    $("#pass2").blur(function () {
        let p1 = $("#pass1").val();
        let p2 = $("#pass2").val();
        if (p1.length !== p2.length) {
            $("#pass_v").css("color", "red").text("密码不一致");
            pass_bool = false;
        } else {
            if (p1 === p2) {
                $("#pass_v").text("");
                bool_btn();
                pass_bool = true;
            } else {
                pass_bool = false;
            }
        }
    });

    function bool_btn(){
        if ((mail_bool && pass_bool && name_bool) || (phone_bool && pass_bool && name_bool)){
            $('#doRegister').removeAttr("disabled");
        }
    }

    $('input[name="sex"]').click(function (){
        bool_btn();
    });


    function doRegister(){
        if ((mail_bool && pass_bool && name_bool) || (phone_bool && pass_bool && name_bool)) {
            let phone = $("#phone").val();
            let email = $("#email").val();
            let name = $("#user_name").val();
            let pass = $("#pass1").val();
            let sex = $('input[name="sex"]:checked').val();
            $.ajax({
                type: "POST",
                data: {"uPhone": phone, "uPass": pass, "uEmail": email, "uName": name, "uSex": sex},
                url: "/user/doRegister",
                success:function (data) {
                    console.log(data);
                    if (data.code === 200) {
                        alert("注册成功");
                        window.location.href='/login/index'
                    } else {
                        alert(data.msg);
                    }
                }
                /*success: function (data) {
                    console.log(data);
                    if (data.code === 200) {
                        window.location.href='/login/index'
                    } else {
                        alert(data.msg);
                    }
                },
                error:function (){
                    alert("网络出错，请重试");
                }*/
            });
        }

    }
</script>
</body>
</html>
